<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">

    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>



    <van-cell-group>
        <van-cell title="单元格" v-bind:value="message" ></van-cell>
        <van-cell title="单元格" v-bind:value="message" ></van-cell>
    </van-cell-group>

    <van-cell is-link @click="showPopup">展示弹出层</van-cell>

    <van-popup v-model="show">内容</van-popup>

    <van-cell-group>
        <van-field v-model="value" label="文本" placeholder="请输入用户名" />
        <!-- 输入任意文本 -->
<!--        <van-field v-model="text" label="文本" />-->
<!--        &lt;!&ndash; 输入手机号，调起手机号键盘 &ndash;&gt;-->
<!--        <van-field v-model="tel" type="tel" label="手机号" />-->
<!--        &lt;!&ndash; 允许输入正整数，调起纯数字键盘 &ndash;&gt;-->
<!--        <van-field v-model="digit" type="digit" label="整数" />-->
<!--        &lt;!&ndash; 允许输入数字，调起带符号的纯数字键盘 &ndash;&gt;-->
<!--        <van-field v-model="number" type="number" label="数字" />-->
<!--        &lt;!&ndash; 输入密码 &ndash;&gt;-->
<!--        <van-field v-model="password" type="password" label="密码" />-->
    </van-cell-group>

    <van-cell-group>
        <van-field v-model="text" label="文本" />
    </van-cell-group>

    <van-cell-group>
        <van-field label="文本" value="输入框只读" readonly />
        <van-field label="文本" value="输入框已禁用" disabled />
    </van-cell-group>


    <van-form @submit="onSubmit">
        <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
    </van-form>


</div>


<script src="/js/vue.js"></script>
<script src="/js/vant.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message : '这是一个标签',
                // form
                date: '',
                formData: {},
                show: false,
                list: [],
                loading: false,
                finished: false
            }
        },
        methods: {
            showPopup() {
                alert("haha")
                this.show = true;
            },
            showPopup() {
                this.show = true;
            }
        }
    });
    app.use(vant.Icon);
    app.use(vant.Cell);
    app.use(vant.Form);
    app.use(vant.Field);
    app.use(vant.Popup);
    app.use(vant.Picker);
    app.use(vant.Uploader);
    app.use(vant.Calendar);
    app.use(vant.Button);
    app.mount('#app');
</script>
</body>
</html>